<template>
  <el-dialog
    v-model="dialogVisible"
    :title="mode === 'create' ? '新增绩效记录' : '编辑绩效记录'"
    width="800px"
    :before-close="handleClose"
  >
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
      <el-form-item label="员工" prop="employee.id">
        <el-select
          v-model="formData.employee.id"
          placeholder="请选择员工"
          filterable
        >
          <el-option
            v-for="employee in employees"
            :key="employee.id"
            :label="employee.name"
            :value="employee.id"
          />
        </el-select>
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="考核周期" prop="period">
            <el-select v-model="formData.period" placeholder="请选择考核周期">
              <el-option label="第一季度" value="第一季度" />
              <el-option label="第二季度" value="第二季度" />
              <el-option label="第三季度" value="第三季度" />
              <el-option label="第四季度" value="第四季度" />
              <el-option label="年度考核" value="年度考核" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="评估日期" prop="evaluationDate">
            <el-date-picker
              v-model="formData.evaluationDate"
              type="date"
              placeholder="选择评估日期"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="综合评分" prop="overallScore">
        <el-rate
          v-model="formData.overallScore"
          :max="5"
          show-score
          text-color="#ff9900"
          score-template="{value}"
        />
      </el-form-item>

      <el-form-item label="能力维度评分">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="dimension-score">
              <span class="dimension-label">绩效领导力:</span>
              <el-rate
                v-model="formData.leadershipScore"
                :max="5"
                show-score
                text-color="#ff9900"
                score-template="{value}"
              />
            </div>
          </el-col>
          <el-col :span="12">
            <div class="dimension-score">
              <span class="dimension-label">技术能力:</span>
              <el-rate
                v-model="formData.technicalScore"
                :max="5"
                show-score
                text-color="#ff9900"
                score-template="{value}"
              />
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 10px">
          <el-col :span="12">
            <div class="dimension-score">
              <span class="dimension-label">人际交往能力:</span>
              <el-rate
                v-model="formData.communicationScore"
                :max="5"
                show-score
                text-color="#ff9900"
                score-template="{value}"
              />
            </div>
          </el-col>
          <el-col :span="12">
            <div class="dimension-score">
              <span class="dimension-label">团队协作:</span>
              <el-rate
                v-model="formData.teamworkScore"
                :max="5"
                show-score
                text-color="#ff9900"
                score-template="{value}"
              />
            </div>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="评估人" prop="evaluator">
        <el-input v-model="formData.evaluator" placeholder="请输入评估人姓名" />
      </el-form-item>

      <el-form-item label="主要成果" prop="achievements">
        <el-input
          v-model="formData.achievements"
          type="textarea"
          :rows="3"
          placeholder="请输入主要工作成果和业绩"
        />
      </el-form-item>

      <el-form-item label="评语">
        <el-input
          v-model="formData.comments"
          type="textarea"
          :rows="3"
          placeholder="请输入评估评语和建议"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref, watch, nextTick } from "vue";
import { ElMessage } from "element-plus";

export default {
  name: "PerformanceDialog",
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    performance: {
      type: Object,
      default: null,
    },
    employees: {
      type: Array,
      default: () => [],
    },
    mode: {
      type: String,
      default: "create",
    },
  },
  emits: ["update:modelValue", "save", "close"],
  setup(props, { emit }) {
    const dialogVisible = ref(false);
    const formRef = ref();
    const loading = ref(false);

    const formData = ref({
      employee: {
        id: "",
      },
      period: "",
      evaluationDate: "",
      overallScore: 0,
      leadershipScore: 0,
      technicalScore: 0,
      communicationScore: 0,
      teamworkScore: 0,
      evaluator: "",
      achievements: "",
      comments: "",
    });

    const rules = {
      "employee.id": [
        { required: true, message: "请选择员工", trigger: "change" },
      ],
      period: [
        { required: true, message: "请选择考核周期", trigger: "change" },
      ],
      evaluationDate: [
        { required: true, message: "请选择评估日期", trigger: "change" },
      ],
      overallScore: [
        { required: true, message: "请给出综合评分", trigger: "change" },
      ],
      evaluator: [
        { required: true, message: "请输入评估人姓名", trigger: "blur" },
      ],
      achievements: [
        { required: true, message: "请输入主要成果", trigger: "blur" },
      ],
    };

    watch(
      () => props.modelValue,
      (newVal) => {
        dialogVisible.value = newVal;
        if (newVal && props.performance) {
          // 编辑模式下填充数据
          nextTick(() => {
            formData.value = {
              ...props.performance,
              employee: {
                id: props.performance.employeeId || "",
              },
            };
          });
        } else if (newVal) {
          // 创建模式下重置数据
          formData.value = {
            employee: {
              id: "",
            },
            period: "",
            evaluationDate: "",
            overallScore: 0,
            leadershipScore: 0,
            technicalScore: 0,
            communicationScore: 0,
            teamworkScore: 0,
            evaluator: "",
            achievements: "",
            comments: "",
          };
        }
      }
    );

    watch(dialogVisible, (newVal) => {
      emit("update:modelValue", newVal);
    });

    const handleClose = () => {
      dialogVisible.value = false;
      emit("close");
    };

    const handleSubmit = async () => {
      if (!formRef.value) return;

      try {
        const valid = await formRef.value.validate();
        if (valid) {
          loading.value = true;
          emit("save", { ...formData.value });
        }
      } catch (error) {
        ElMessage.error("请完善表单信息");
      } finally {
        loading.value = false;
      }
    };

    return {
      dialogVisible,
      formRef,
      formData,
      rules,
      loading,
      handleClose,
      handleSubmit,
    };
  },
};
</script>

<style scoped>
.dimension-score {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dimension-label {
  min-width: 70px;
  font-size: 14px;
  color: #606266;
}
</style>
